<template>
	<view>
		<tui-bottom-popup :show="show" @close="onClose">
			<view class="tui-popup-box">
				<view class="tui-popup-title">优惠</view>
				<view class="tui-coupon-title">可以{{picker ? '使用' : '领取'}}优惠券</view>
				<view class="tui-popup-content" v-if="datas && datas.length">
					<scroll-view scroll-y style="height: 940rpx;">
						<t-coupon-item
							v-for="item in datas"
							:key="item.id"
							:coupon="item"
							@select="onItemTaped"
							:picker="picker"
							:valid="valid" />
						<view class="tui-with-out" v-if="picker">
							<!-- <label class="radio" @click="onItemTaped(null, 'picked')">
								<checkbox value="1" :checked="unuseCoupon" />
								<text>不使用优惠券</text>
							</label> -->
							<tui-button shape="circle" :size="28" type="danger" height="70rpx" @click="onItemTaped(null, 'picked')">不使用优惠券</tui-button>
						</view>
					</scroll-view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="onClose"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import TCouponItem from '../t-coupon-item/t-coupon-item.vue'

	export default {
		components: { TCouponItem },
		props: {
			show: {
				type: Boolean,
				default: false
			},
			coupons: {
				type: Array,
				default: () => ([])
			},
			picker: {
				type: Boolean,
				default: false
			},
			valid: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				datas: [],
				unuseCoupon: false
			};
		},
		watch: {
			coupons: {
				immediate: true,
				handler(val) {
					// console.log(val, 'ssss')
					this.datas = val;
				}
			}
		},
		methods: {
			onClose() {
				this.unuseCoupon = false
				// console.log(this.unuseCoupon, 'unuseCoupon')
				this.$emit('close')
			},
			onItemTaped(coupon, action) {
				const { couponId, merchantId } = coupon || {}
				const { customerId } = this.$store.state
				
				if (action === 'receive') {
					const params = {
					  couponId,
					  customerId
					}

					this.doReceive(params)
				} else if (action === 'use') {
					uni.switchTab({
						url: '/pages/classify/classify',
						fail(e) {
							console.log(e, 'error')
						}
					})
				} else if (action === 'picked') {
					this.unuseCoupon = false
					this.$emit('picked', coupon)
				}
			},
			doReceive(params) {
				this.$api.ReceiveCoupon(params).then(data => {
					// console.log(data, 'result')
					if (data.success) {
						this.$emit('refresh')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
@import "./t-coupon-picker";
</style>
